<template>
    <div class="Personalicenter">

        <div class="conetent-nav">
            <div class="conetent-nav-head">
                <img src="/images/logo.png" class="logo1" @click="goback()">
                <ul>
                    <li v-for="(item,index) in tablesList" :key="index" :class="tablesListindex ==index?'selctestye':''" @click="checket(index)">{{item}}</li>
                    <!-- <li><img src="/images/气泡.png" class="conetent-nav-info"/></li> -->
                    <li class="conetent-nav-my-center">
                        <div class="login" v-if="IsLogins">
                        <el-menu class="el-menu-demo" mode="horizontal">
                            <el-submenu index="2">
                            <img slot="title" alt="" class="title userAvatar" :src="avatar"/>
                            <el-menu-item @click="Topersonil">个人中心</el-menu-item>
                            <!-- <el-menu-item>切换账号</el-menu-item> -->
                            <el-menu-item @click="Logout">退出登录</el-menu-item>
                            </el-submenu>
                        </el-menu>
                        </div>
                        <div class="login" v-else>
                        <button @click="GoLogin" style="margin-left:14px;">登录</button>
                        <button @click="Gozhuce">注册</button>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <Denglu v-if="IsLogin" :IsLogin.sync ='IsLogin' :IsLogins.sync ='IsLogins' :avatar.sync ='avatar'></Denglu>
        <Download></Download>
        <Footer></Footer>
    </div>
</template>
<script>
import Footer from '../../components/footer'
import Denglu from '../../components/denglu'
import Download from './Download'
export default {
    name: 'Personalicenter',
    data(){
        return{
            tablesList:['主页','学习中心','教学中心','直播课堂','场景直播','客户端下载'],
            tablesListindex:5,//this.$route.query.index,
            unserinfo:JSON.parse(localStorage.getItem('userinfo')),
            avatar:'',
            IsLogin:false,
        }
    },
    components: {//组件注册
        Footer,
        Download,
        Denglu
    },
    created(){
        let _this = this
        if (_this.unserinfo == undefined || _this.userinfo == "") {
            _this.IsLogins = false;
        } else {
            _this.IsLogins = true;
            _this.avatar = _this.unserinfo.avatar
        }
        // alert(_this.IsLogins)
    },
    methods:{
        Logout(){//退出登录
            localStorage.clear()
            this.$router.push({path:'/'})
        },
        Gozhuce(){
            this.$router.push({ path:'/',query:{outerVisible:true}})
        },
        GoLogin(){
            this.IsLogin = true;
        },
        outerVisible(){
            this.$router.push({ path:'/',query:{outerVisible:true}})
        },
        checket(e){
            
            this.tablesListindex = e
            this.$toTop()
            localStorage.setItem("tablesListindex",this.tablesListindex)
            console.log(this.IsLogins)
            if(this.IsLogins){
                if( this.tablesListindex == 0){
                    this.$router.push({path:'/'})
                }else if(this.tablesListindex == 1){
                    this.$router.push({path:'/views/Learningcenter/Liveclassroom',query: {index: 1}})
                }else if(this.tablesListindex == 2){
                    this.$router.push({path:'/views/Teachingcenters/Livelectureinstructor',query: {index: 2}})
                }else if (this.tablesListindex ==3){
                    this.$router.push({path:'/views/Liveclassroom/ClassRoomInfo',query: {index: 3}})
                }else if(this.tablesListindex == 4){
                    this.$router.push({path:'/views/LiveScene/SceneRoomInfo',query: {index: 4}})
                }else if(this.tablesListindex == 5){
                    this.$router.push({ path: "/views/Download",query: {index: 5}});
                }else if(this.tablesListindex == 7){
                    console.log(this.Isend)
                    if(this.Isend ==true){
                        this.$router.push({ path:'/views/Teachingcentercoursedetails',query: {id: this.Teachingcentercoursedetailsid,Isstudents:true,Isend:true}})
                    }else if(this.Isend ==false){
                        this.$router.push({ path:'/views/Teachingcentercoursedetails',query: {id: this.Teachingcentercoursedetailsid,Isstudents:true,Isend:false}})
                    }
                }
            }else{
                if( this.tablesListindex == 0){
                    this.$router.push({path:'/'})
                }else if (this.tablesListindex == 3){
                    this.$router.push({path: '/views/LiveclassroomDetial',query:{tablesListindex:3}})
                }else if (this.tablesListindex ==4){
                    this.$router.push({path: '/views/LiveclassroomDetial',query:{tablesListindex:4}})
                }else{
                    this.$message({duration:600,message:'请先登录',type:'warning'})
                }
            }
            
        },
        goback(){
            this.$router.push({path:'/'})
        }
    }
}
</script>
<style lang="less" scoped>
    @import '../index/nav.css';
    .userAvatar{
        width: 50px;
        height: 50px;
        border-radius: 25px;
        position: relative;
        top: -5px;
    }
    .login {
        width: 210px;
        height: 40px;
        display: flex;
        margin-top: 6px;
        /deep/ .el-menu-demo {
            // width: 100%;
            background: none;
            margin-top: -20px;
            border: none;
            margin-left: auto;
            /deep/ .el-submenu__title{
                background: none;
            }
            /deep/ .el-submenu__title:hover{
                background: none;
            }
        }
    }
.login /deep/.el-submenu__title {
  width: 120px !important;
  height: 40px !important;
  background: rgba(255, 255, 255, 1);
  border-radius: 18px;
  line-height: 40px !important;
  color: #64c6c9 !important;
}
    .login button {
  width: 91px;
  height: 35px;
  background: rgba(255, 255, 255, 1);
  border-radius: 18px;
  border: none;
  margin-left: 10px;
  color: #64c6c9;
  cursor: pointer;
  outline: none;
}
.login button:last-child {
  background: none;
  border: 1px solid #ffffff;
  color: #ffffff;
}
    .conetent-nav{
        position: fixed;
        display:flex;
        align-items: center;
        width: 100%;
        height: 80px;
        background: #47CECF;
        
    }
    .conetent-nav-content{
        position: relative;
        width: 80%;
        margin: 0 auto;
        height: 80px;
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        justify-content: space-between;
        .logo{
            display: flex;
            width: 30%;
            height: 80px;
            align-items: center;
        }
        ul{
            margin-left: auto;
            height: 80px;
            width: 50%;
            list-style: none;
            padding: 0;
            display: flex;
            li{
                width: 20%;
                height: 100%;
                line-height: 80px;
                text-align: center;
                color: #FFFFFF;
                font-size: 18px;
                cursor: pointer;
            }
        }
    }

</style>